<template>
    <div id='wrap'>
        <h1>TAB切换</h1>
        <div class="box">
            <!-- 遍历imgArr数组，生成多个div元素 -->
            <!-- 这里的item为tabArr数组元素 -->
            <div v-for="(item, index) in imgArr" :key="index"
                :class="['inner', { activeimg: index == currentIndex }, item]" ref="inner"></div>
            <ul class="nav" ref="uls">
                <!-- 遍历tabArr数组，生成li元素 -->
                <!-- 这里的item为imgArr数组元素 -->
                <li v-for="(item, index) in tabArr" :key="index" :class="{ active: index == currentIndex }"
                    ref="lisItem" @click="handleClick(index)">
                    <!-- 显示item的值 -->
                    {{ `${item}` }}
                </li>
            </ul>
        </div>
    </div>
</template>
<script lang='ts'>
export default {
    name: 'tab切换',
}
</script>
<script lang='ts' setup>
import { ref, type Ref, onMounted, onUpdated } from 'vue';
// import { h } from 'vue';
//创建数组元素存放分页器内的内容
const tabArr = ref(['超级粉丝2024', '全球总决赛 荣耀征程', 'T1小小奥莉安娜', '星守小小阿卡丽', 's14赛程']);
//创建数组元素存放图片的类名
const imgArr = ref(['img1', 'img2', 'img3', 'img4', 'img5']);
//用于存储当前显示的元素的下标
const currentIndex = ref(0);
//处理点击事件，将当前点击的索引赋值给 currentIndex
function handleClick(index: number) {
    currentIndex.value = index;//将当前点击的下标赋值给currentIndex
}

//不需要获取这些元素
//获取所有的li元素
// const lisItem = ref<HTMLLIElement[]>([]);
// console.log(lisItem.value);
// //获取所有的图片元素
// const inner = ref<HTMLDivElement[]>([]);
// console.log(inner.value)
</script>
<style lang='scss'>
.box {
    width: 820px;
    height: 380px;
    margin: 50px auto;
    border: 2px solid wheat;
    position: relative;
}

.inner {
    width: 100%;
    height: 340px;
    display: none;
}

.img1 {
    background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241010/59fc14ad5433872c7255361d269b0862.jpeg) center center/cover no-repeat;
}

.img2 {
    background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241009/2fd63a8a89b7a787c48a002811549970.jpeg) center center/cover no-repeat;
}

.img3 {
    background: url(https://ossweb-img.qq.com/upload/adw/image/977/20240926/6ff9a3b91a118fd01d3027a7184ae7b4.jpeg) center center/cover no-repeat;
}

.img4 {
    background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241010/a930e92f486f585dbd4fd36ade1115aa.jpeg) center center/cover no-repeat;
}

.img5 {
    background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241011/f3d821ee267bd18f4e0c11582280eca5.jpeg) center center/cover no-repeat;
}

/* 导航部分 */
.nav {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0px;
    overflow: hidden;
    background-color: #e3e2e2;
}

.nav>li {
    float: left;
    width: calc(100% / 5);
    height: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}

.active {
    background-color: white;
    color: rgb(187, 142, 102);
    font-weight: bold;
}

.activeimg {
    display: block;
}
</style>